<!--音乐头部-->
<template>
  <div class="navbar">
    <div class="nav_header">
      <a href="#" class="nav_logo"><img src="./images/logo.png" alt=""></a>
      <ul class="nav_choose">
        <li class="select" title="音乐馆">音乐馆</li>
        <li title="我的音乐">我的音乐</li>
        <li title="客户端">
          客户端
          <span>抢特效</span>
          <div class="li_content">
            <div>
              <span class="iconfont icon-quality-copy"></span>
              <span>HQ高品质 全员开启</span>
            </div>
            <div>
              <span class="iconfont icon-icon--copy"></span>
              <span>独家音效 全面升级</span>
            </div>
            <div>
              <span class="iconfont icon-fl-pifu-copy"></span>
              <span>轻盈视觉 动态皮肤</span>
            </div>
            <div class="li_download">
              <span>下载体验</span>
            </div>
          </div>
        </li>
        <li title="音乐号">音乐号</li>
        <li title="VIP">VIP</li>
      </ul>
      <div class="nav_search">
        <input type="text" placeholder="搜索音乐、MV、歌单、用户">
        <span class="iconfont icon-sousuo"></span>
        <div class="nav_search_ranking">
          <ul>
            <li>
              <span class="num">1</span>
              <span class="name">NATURAL</span>
              <span class="count">58.5万</span>
            </li>
            <li>
              <span class="num">2</span>
              <span class="name">青花</span>
              <span class="count">24.8万</span>
            </li>
            <li>
              <span class="num">3</span>
              <span class="name">画</span>
              <span class="count">24.7万</span>
            </li>
            <li>
              <span class="num">4</span>
              <span class="name">陈情令</span>
              <span class="count">21.9万</span>
            </li>
            <li>
              <span class="num">5</span>
              <span class="name">IN THE END</span>
              <span class="count">19.7万</span>
            </li>
          </ul>
          <div class="history">
            <div class="his_label">
              <span>搜索历史</span>
              <span class="iconfont icon-shanchu"></span>
            </div>
            <ul>
              <li>
                <span class="name">乐队的夏天</span>
                <span class="iconfont icon-cuowu"></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="nav_vip">
        <span class="select">开通绿砖豪华版</span>
        <span>开通付费包</span>
      </div>
      <div class="nav_login">
        登录
      </div>

    </div>
    <div class="nav_type">
      <ul>
        <router-link tag="li" to="/home" :class="{select:$route.path==='/home'}">首页</router-link>
        <router-link tag="li" to="/singer" :class="{select:$route.path==='/singer'}">歌手</router-link>
        <router-link tag="li" to="/newalbum" :class="{select:$route.path==='/newalbum'}">新碟</router-link>
        <router-link tag="li" :to="'/ranking/'+$store.state.topId" :class="{select:$route.path==='/ranking/'+$store.state.topId}">排行榜</router-link>
        <router-link tag="li" to="/songtype" :class="{select:$route.path==='/songtype'}">分类歌单</router-link>
        <router-link tag="li" to="/radiostation" :class="{select:$route.path==='/radiostation'}">电台</router-link>
        <router-link tag="li" to="/mv" :class="{select:$route.path==='/mv'}">MV</router-link>
        <router-link tag="li" to="/numberedition" :class="{select:$route.path==='/numberedition'}">数字专辑</router-link>
      </ul>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "MusicHeader",
        computed:{
          ...mapState(['topId']),
        },
    }
</script>

<style scoped lang="less">
  /*navbar导航栏*/
   .navbar{width: 1250px;margin: 0 auto;background: #fff;}
   .navbar .nav_header{width: 1250px;height: 90px;line-height: 90px;border-bottom: 1px solid #f2f2f2;position: relative;}
   .navbar .nav_header img{padding-bottom: 22px;margin-right: 10px;}
   .navbar .nav_header .nav_choose{display: inline-block;}
   .navbar .nav_header .nav_choose li{float: left;width: 94px;text-align: center;font-size: 18px;}
   .navbar .nav_header .nav_choose li:nth-child(3){position: relative;}
   .navbar .nav_header .nav_choose li:nth-child(3) .li_content{position: absolute;height: 139px;width: 150px;border: 1px solid #f2f2f2;box-shadow:0 0 5px #dedede;padding: 16px;font-size: 14px;line-height: 1;text-align: left;top: 70px;left: 22px;z-index:1;border-radius: 5px;background: white;display: none;}
   .navbar .nav_header .nav_choose li:nth-child(3):hover .li_content{display: block;}
   .navbar .nav_header .nav_choose li:nth-child(3) .li_content .iconfont{color: #31c27c;}
   .navbar .nav_header .nav_choose li:nth-child(3) .li_content>div{margin-bottom: 20px;}
   .navbar .nav_header .nav_choose li:nth-child(3) .li_content .li_download{height: 25px;background: #31c27c;border-radius: 10px;text-align: center;color: white;line-height: 25px;margin-bottom: 0px;}
   .navbar .nav_header .nav_choose li:nth-child(3)>span{position: absolute;top:19px;right: -5px;background: #eed29b;font-size: 12px;display: inline-block;height: 14px;padding: 0 2px;line-height: 1;color: #a6773a;}
   .navbar .nav_header .nav_choose li:nth-child(3):hover .li_content{color:initial;}
   .navbar .nav_header .nav_choose li:hover{color: #31c27c;cursor: pointer;}
   .navbar .nav_header .nav_choose li:hover>span{color: #a6773a;cursor:initial;}
   .navbar .nav_header .nav_choose li.select{color: white;background: #31c27c;}
   .navbar .nav_header .nav_search{display: inline-block;margin-left: 42px;margin-right: 23px;position: absolute;top:0;box-sizing: border-box;}
   .navbar .nav_header .nav_search>input{width: 220px;height: 38px;line-height: 38px;border: 1px solid #c9c9c9;padding: 0px 10px;box-sizing: border-box;color: #757575;font-size: 14px;border-radius: 3px;}
   .navbar .nav_header .nav_search>input:focus{outline: none;}
   .navbar .nav_header .nav_search>span{position: absolute;font-weight: bold;top:3px;right: 10px;}
   .navbar .nav_header .nav_search>span:hover{color: #31c27c;}
   .navbar .nav_header .nav_search .nav_search_ranking{line-height: 1;width: 220px;border: 1px solid #c9c9c9;box-sizing: border-box;color: #333333;font-size: 14px;padding: 5px 0px;position: absolute;top:64px;left: 0px;z-index: 1;background: white; /*这里应该要用js*/display: none}
   .navbar .nav_header .nav_search .nav_search_ranking ul li{padding: 12px 10px;}
   .navbar .nav_header .nav_search .nav_search_ranking ul li:first-child{padding-top: 16px;}
   .navbar .nav_header .nav_search .nav_search_ranking ul li:hover{background:#31c27c;color: white;}
   .navbar .nav_header .nav_search .nav_search_ranking ul li:hover .num{color: white;}
   .navbar .nav_header .nav_search .nav_search_ranking ul li:hover .count{color: white;}
   .navbar .nav_header .nav_search .nav_search_ranking .num{margin-right: 14px;color: #ff5d4c;}
   .navbar .nav_header .nav_search .nav_search_ranking .count{float: right;color: #999999;}
   .navbar .nav_header .nav_search .nav_search_ranking .history .his_label{padding: 12px 10px;height: 18px;color: #999;}
   .navbar .nav_header .nav_search .nav_search_ranking .history .his_label span:last-child{float: right;font-weight: bold;font-size: 18px;}
   .navbar .nav_header .nav_search .nav_search_ranking .history ul li{position: relative;}
   .navbar .nav_header .nav_search .nav_search_ranking .history ul li .iconfont{position: absolute;top: 10px;right: 6px;font-size: 26px;display: none;}
   .navbar .nav_header .nav_search .nav_search_ranking .history ul li:hover .iconfont{display: inline-block;}
   .navbar .nav_header .nav_login{float: right;margin-right:21px;}
   .navbar .nav_header .nav_login:hover{cursor: pointer;color: #31c27c;}
   .navbar .nav_header  .nav_vip{float: right;margin-right: 38px;}
   .navbar .nav_header  .nav_vip>span{margin-right: 10px;padding:10px 6px ;font-size: 14px;border: 1px solid #c9c9c9;border-radius: 3px;}
   .navbar .nav_header  .nav_vip>span.select{color: white;background: #31c27c;}
   .navbar .nav_type{width: 1250px;height: 52px;line-height: 52px;}
   .navbar .nav_type ul{margin: 0 auto;text-align: center;}
   .navbar .nav_type ul li{display: inline-block;margin: 0 25px;}
   .navbar .nav_type ul li:hover{color: #31c27c;cursor: pointer;}
   .navbar .nav_type ul li.select{color: #31c27c;}
</style>
